<template>
  <el-dialog
    :type="type"
    :title="title"
    :append-to-body="appendToBody"
    :visible.sync="visible"
    :close-on-click-modal="closeOnClickModal"
    :width="width"
  >
    <div class="ceshiBox">
      <el-checkbox-group v-model="checklist">
        <el-checkbox label="A"></el-checkbox>
        <el-checkbox label="B"></el-checkbox>
        <el-checkbox label="C"></el-checkbox>
        <el-checkbox label="D"></el-checkbox>
        <el-checkbox label="E"></el-checkbox>
        <el-checkbox label="F"></el-checkbox>
      </el-checkbox-group>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button class="btn-red" type="primary" @click="dataFormSubmit">
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    appendToBody: { type: Boolean, default: false }, // 是否嵌套
    closeOnClickModal: { type: Boolean, default: false }, // 是否可以点击关闭
    title: String, // 对话框title
    type: String, // 对话框类型：1.基础表单[base-dialog-form] 2.表格[base-dialog-table] 3.全屏 [base-dialog-fullscreen]
    width: String, // 对话框宽度800px 或 50%
  },
  data() {
    return {
      visible: false,
      checklist: ['A', 'D', 'E'],
    }
  },

  methods: {
    init() {
      this.visible = true
    },
    dataFormSubmit() {
      this.$emit('checklist', this.checklist)
      this.visible = false
    },
  },
}
</script>
<style lang="scss" scoped>
.ceshiBox {
  text-align: center;
}
.ceshiBox {
  ::v-deep {
    .el-checkbox {
      // display: block; 纵向展示的样式
      font-size: 30px;
    }
    //将多选勾选框隐藏不显示
    .el-checkbox__input {
      display: none;
    }
    //修改选中选项的字体样式，背景颜色，边框大小和颜色等
    .el-checkbox__input.is-checked + .el-checkbox__label {
      font-weight: 600;
      background: #541d54;
      border: 5px solid #87acf4;
    }
    //修改选项框的默认样式，修改边距，添加圆形边框，字体大小等
    .el-checkbox__label {
      display: inline-block;
      padding-left: 10px;
      padding-right: 10px;
      line-height: 30px;
      border-radius: 20px;
      font-size: 14px;
      border: 1px solid;
    }
    //修改没有选中的选项字体的颜色
    .el-checkbox__input.is-disabled + span.el-checkbox__label {
      color: #090909;
      cursor: not-allowed;
    }
    //修改-->禁用选项--->下类名中的--->选中的选项中间文字颜色
    .el-checkbox__input.is-disabled.is-checked + span.el-checkbox__label {
      color: #eff6f0;
      cursor: not-allowed;
    }
  }
}
</style>
